<template>
  <view class="container">
    <view style="padding-top: 20px;"></view>
    <uni-row class="info-bg">
      <uni-col :span="8">
        <view style="padding-top: 10px;">
          <image :src="userInfo.avatar" style="height: 88px;width: 88px;border-radius: 44px" />
        </view>
      </uni-col>
      <uni-col :span="16">
        <view>
          <uni-icons type="person" size="17"></uni-icons>
          <text style="font-size: 17px;font-weight: bold;">&nbsp;{{ userInfo.name }}</text>
        </view>
        <view class="text">
          <uni-icons type="phone" size="15"></uni-icons>
          <text>&nbsp;{{ userInfo.phone }}</text>
          <br />
          <uni-icons type="email" size="15"></uni-icons>
          <text>&nbsp;{{ userInfo.email }}</text>
          <br />

          <uni-icons type="shop" size="15"></uni-icons>
          <text>&nbsp;{{ userInfo.departmentName }}-{{ userInfo.positionName }}</text>
        </view>
      </uni-col>
    </uni-row>
    <view style="padding-top: 20px;"></view>
    <!-- <view class="btn-bg radius-up" @click="onClickModifyPwd">
      <uni-icons type="locked" size="18"></uni-icons>
      <text style="font-size: 14;">&nbsp;修改密码</text>
    </view> -->
    <view class="btn-bg radius-up" @click="onClickModifyAvatar">
      <uni-icons type="staff-filled" size="18"></uni-icons>
      <text style="font-size: 15;">&nbsp;修改头像</text>
    </view>
    <!-- <view class="btn-bg " @click="onClickModifyName">
				<uni-icons type="auth" size="18"></uni-icons>
				<text style="font-size: 15;">&nbsp修改信息</text>
    </view>-->
    <view class="btn-bg" @click="onClickModifySign">
      <uni-icons type="image-filled" size="18"></uni-icons>
      <text style="font-size: 15;">&nbsp;电子签名</text>
    </view>
    <view class="btn-bg" @click="onClickDocumentCollection">
      <uni-icons type="paperclip" size="18"></uni-icons>
      <text style="font-size: 15;">&nbsp;公文收藏</text>
    </view>
    <view class="btn-bg" @click="onClickDocumentHistory">
      <uni-icons type="wallet" size="18"></uni-icons>
      <text style="font-size: 15;">&nbsp;历史公文</text>
    </view>
    <view class="btn-bg radius-down" @click="onClickWeeklyWork">
      <uni-icons type="calendar" size="18"></uni-icons>
      <text style="font-size: 15;">&nbsp;每周工作</text>
    </view>
    <view style="padding-top: 50px;"></view>
    <button type="warn" @click="onClickLogout">退出登录</button>
  </view>
</template>

<script>
import { websock } from "../../net/websock";
import store, { logout } from "../../store";
import socket from "../../net/socket";
export default {
  data() {
    return {
      store,
      userInfo: {}
    };
  },
  async onReady() {
    try {
      this.userInfo = await websock.getUserInfo();
      console.log("user info", this.userInfo);
    } catch (e) {
      uni.showToast({ title: e.message });
    }
  },
  onLoad() {
    uni.$on("userInfoChange", this.userInfoChange);
  },
  onUnload() {
    uni.$off("userInfoChange", this.userInfoChange);
  },
  methods: {
    // 用户信息改变
    async userInfoChange() {
      console.log("user Info changed ---- my index");
      this.userInfo = await websock.getUserInfo();
    },
    // 修改密码
    onClickModifyPwd() {
      uni.navigateTo({
        url: "/pages/login/forgetPwd?uid=" + this.userInfo.uid
      });
    },
    // 修改头像
    onClickModifyAvatar() {
      uni.navigateTo({
        url: "/pages/my/modifyAvatar"
      });
    },
    // 修改签名
    onClickModifySign() {
      uni.navigateTo({
        url: "/pages/my/modifySign"
      });
    },
    // 修改头像
    onClickModifyName() {
      uni.navigateTo({
        url:
          "/pages/my/modifyName?phone=" +
          this.userInfo.phone +
          "&email=" +
          this.userInfo.email
      });
    },
    // 公文收藏
    onClickDocumentCollection() {
      uni.navigateTo({
        url: "/pages/my/documentCollection"
      });
    },
    // 历史公文
    onClickDocumentHistory() {
      uni.navigateTo({
        url: '/pages/my/documentHistory'
      })
    },
    // 每周工作
    onClickWeeklyWork() {
      uni.navigateTo({
        url: "/pages/my/weeklyWork"
      });
    },
    // 退出登录
    onClickLogout() {
      logout()
    }
  }
};
</script>

<style>
.container {
  padding-left: 20px;
  padding-right: 20px;
  line-height: 24px;
  background-image: url(/static/login/bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.info-bg {
  /* border: 1px solid #e6e6e6; */
  border-radius: 10px;
  background-color: white;
  padding: 20px;
}

.text {
  font-size: 15px;
  color: #0e1634;
  font-weight: 400;
}

.btn-bg {
  background-color: #f8f8f8;
  line-height: 24px;
  border: 1px solid #dcdcdc;
  border-bottom-style: none;
  padding: 10px;
  font-size: 15px;
}

.radius-up {
  border-radius: 5px 5px 0px 0px;
}

.radius-down {
  border-top-style: solid;
  border-bottom-style: solid;
  border-radius: 0px 0px 5px 5px;
}
</style>
